<template>
    <el-container>
        <el-header>
            <el-col  class="">
                <el-col  :span="6" class="left">
                    <span class="zi" style="text-align: left">商品名称：</span>
                    <el-input class="inputM" v-model="inputname" placeholder="商品名称"></el-input>
                </el-col>
                <el-col  :span="6" class="left">
                    <span class="zi" style="text-align: left">商品货号：</span>
                    <el-input class="inputM" v-model="inputid" placeholder="商品货号"></el-input>
                </el-col>
                <el-col  :span="6" class="left">
                    <span class="zi" style="text-align: left">商品分类：</span>
                    <el-select v-model="value" placeholder="请选择分类" class="inputM">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.goodsTypeName"
                                :value="item.goodsTypeName">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" plain class="btnsousuo" @click="sousuo">搜索</el-button>
                </el-col>
            </el-col>
        </el-header>
        <el-main>
            <el-table class="tablemenu"   @selection-change="handleSelectionChange"
                    :data="tableData"
                    stripe
                    style="width: 100%">
                <el-table-column type="selection" ></el-table-column>
                <el-table-column
                        prop="goodsId"
                        label="id号" width="70">

                </el-table-column>

                <el-table-column  label="商品名称"    width="300">
                    <template slot-scope="scope">


                        <img style="width: 50px;height: 50px" :src="'http://172.17.4.183:8080/upload/'+scope.row.goodsImg">

                        <span class="shopwenzi">{{scope.row.goodsName}}</span>
                    </template>

                </el-table-column>

                <el-table-column
                        prop="goodsMarketPrice"
                        label="价格">
                </el-table-column>

                <el-table-column   label="上架">
                    <templete  slot-scope="scope">
                        <el-switch
                                v-model="scope.row.goodsStatus"
                                active-value="1"
                                inactive-value="0"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                        </el-switch>
                    </templete>
                </el-table-column>

                <el-table-column
                        prop="goodsVirtualSale"
                        label="虚拟销量">
                </el-table-column>



                <el-table-column prop="caozuo" label="操作">

                    <template slot-scope="scope">
                        <el-button   type="danger" icon="el-icon-delete" class="btn" circle @click="del(scope.row.goodsId)" ></el-button>
                        <el-button   type="primary" icon="el-icon-edit" class="btn" circle @click="mix(scope.row.goodsId)"></el-button>
                    </template>
                </el-table-column>

            </el-table>

           <el-col class="over">

            <div class="btnhuishouzhan">
                <el-button type="primary" plain  @click="delAll">加入回收站</el-button>
            </div>

             <el-pagination class="right"
                            @current-change="handleCurrentChange"
                            @size-change="handleSizeChange"

                            :page-size="5"
                            layout="total, prev, pager, next"
                            :total="count">
             </el-pagination>
         </el-col>


        </el-main>
    </el-container>





</template>

<script>

    export default {
        name: "goods",
        methods: {
            //全选
            handleSelectionChange(val) {
                // this.multipleSelection = val;
                console.log(val)
                this.allArr=val;
            },





            handleSizeChange(val) {
                // this.$axios.post('/api/goods/list',{pageSize:5,goodsIsDeleted:1}).then((res)=>{
                //     console.log(val)
                //     // console.log(res.data.data)
                //     this.tableData=res.data.data
                // })
            },


            handleCurrentChange(val) {
                this.$axios.post('/api/goods/list',{page:val}).then((res)=>{
                    // console.log(res)
                    // console.log(res.data.data)
                    this.tableData=res.data.data
                })
                // console.log(`当前页: ${val}`);
            },

            //搜索
            sousuo(){
                // console.log(1111111111)
                // console.log(this.inputid);
                // console.log(this.inputname);
                // console.log(this.value);
                // console.log(this.options.goodsTypeId)
                // console.log(this.value)

                this.$axios.post('/api/goods/list',{
                    goodsName:this.inputname,
                    goodsUuid:this.inputid,
                    goodsType:this.value
                }).then((res)=>{
                    // console.log(res.data.data);
                    // console.log(this.value)
                    console.log(res)
                    this.tableData=res.data.data;
                })
            },


            //删除
            del(id){
                var arr=[];
                arr.push(id)
                // console.log(idArr);
                this.$axios.post('/api/goods/false/delete',[...arr]

                ).then((res)=>{
                    // console.log(res.data);
                    // this.tableData=res.data;
                    this. getGoodList();
                })
            },

            //加入回收站
            delAll(){
                // console.log('--------------------------------------------')
                var allAll=[];
                this.allArr.forEach((item)=>{
                    // console.log(item)
                    allAll.push(item.goodsId)
                    // console.log(allAll);
                })

                this.$axios.post('/api/goods/false/delete',[...allAll]
                ).then((res)=>{
                    // console.log(res);
                    this. getGoodList();
                })

            },




             //修改
             mix(id){
                sessionStorage.setItem('userId',id);    //存取当前id的值
                this.$emit("child",'third')
                 // this.$router.push('/mix')
                 //    this.$axios.post('/api/goods/update/page?goodsId='+id).then((res)=>{
                 //        // console.log(res)
                 //    })
                },




             //得到数据
             getGoodList(){
                this.$axios.post('/api/goods/list',{}).then((res)=>{
                    console.log("123456")
                    // console.log(res)
                    this.tableData=res.data.data;
                    // console.log(this.tableData)
                    this.count=res.data.count;
                })
            }


        },
           data() {
            return {
                //全部删除
                allArr:[],



                inputname:null,
                inputid:null,
                count:null,
                options: [

                ],
                value:null,
                totalCount:20,
                tableData: [

                ]

            }
        },


           created() {
            this. getGoodList();

            this.$axios.post('/api/goods/getInitData').then((res)=>{
                console.log(res.data.data.goodsType);
                this.options=res.data.data.goodsType;
            })

        }
    }
</script>

<style scoped>
    .left{
        text-align:left;
    }
    .zi{
        font-size: 14px;
        color: black;
    }
    .inputM{
        width: 200px;
        height: 32px;
        border-radius: 40%;
    }
.shopwenzi{
   margin-bottom: 20px;
}
    /deep/ .el-input__inner{
        height: 30px;
    }
    .btnsousuo{
        height: 30px;
        text-align: center;

    }
    /deep/.el-button{
        line-height: 0;
    }
    /deep/ .el-image{
        vertical-align: middle;
    }
    .over{
        overflow: hidden;
        margin-top: 10px;
    }
    .right{
        float: right;
    }
    .btnhuishouzhan{
        float: left;
    }
.el-button--primary.is-plain{
    background-color:  #00CC33;
    color: white;
}
    .el-col-6{
        width: 22%;
    }


</style>